<template>
  <a-form>
    <a-row :gutter="24">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="开工日起">
          <!-- <a-input v-model="queryParam.startDateStart" allowClear /> -->
          <a-date-picker @change="startDateStartChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="开工日止">
          <!-- <a-input v-model="queryParam.startDateEnd" allowClear /> -->
          <a-date-picker @change="startDateEndChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="拟竣工日起">
          <!-- <a-input v-model="queryParam.endDateStart" allowClear /> -->
          <a-date-picker @change="endDateStartChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="拟竣工日止">
          <!-- <a-input v-model="queryParam.endDateEnd" allowClear /> -->
          <a-date-picker @change="endDateEndChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="项目名称">
          <a-input v-model="queryParam.projectName" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="所属板块">
          <!-- <a-select allowClear :default-value="{ id: userInfo.DepartmentID}" v-model="queryParam.departmentID"
            @change="handleChange" :disabled="isDepartment">
            <a-select-option v-for="(department, index) in departmentOptions" :key="index" :value="department.Id">
              {{ department.DepartmentName }}</a-select-option>
          </a-select> -->
          <a-cascader :options="departmentOptions" :default-value="[queryParam.departmentID]" :load-data="loadData"
            :field-names="{ label: 'DepartmentName', value: 'Id', children: 'children' }" change-on-select
            @change="handleChange" placeholder="请选择" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="建设单位">
          <a-input v-model="queryParam.ownerUnit" allowClear placeholder="名称/联系人/电话" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="施工单位">
          <a-input v-model="queryParam.constructionUnit" allowClear placeholder="名称/联系人/电话" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="监理单位">
          <a-input v-model="queryParam.supervisorUnit" allowClear placeholder="名称/联系人/电话" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="工程类型">
          <a-select allowClear v-model="queryParam.ProjectTypeID" @change="handleTypeChange">
            <a-select-option v-for="(type, index) in projectTypeOptions" :key="index" :value="type.ID">
              {{ type.Title }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="备案日期起">
          <!-- <a-input v-model="queryParam.endDateStart" allowClear /> -->
          <a-date-picker @change="addTimeStartChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="备案日期止">
          <!-- <a-input v-model="queryParam.endDateEnd" allowClear /> -->
          <a-date-picker @change="addTimeEndChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="需核查">
          <a-select allowClear v-model="queryParam.IsNeedCheck"
            @change="(val, option) => handleCheckChange(val, option, 'IsNeedCheck')">
            <a-select-option value="null"> 全部 </a-select-option>
            <a-select-option value="true"> 是 </a-select-option>
            <a-select-option value="false"> 否 </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="已核查">
          <a-select allowClear v-model="queryParam.IsHasCheck"
            @change="(val, option) => handleCheckChange(val, option, 'IsHasCheck')">
            <a-select-option value="null"> 全部 </a-select-option>
            <a-select-option value="true"> 是 </a-select-option>
            <a-select-option value="false"> 否 </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="工程状态">
          <a-select allowClear v-model="queryParam.ProjectState"
            @change="(val, option) => handleCheckChange(val, option, 'ProjectState')">
            <a-select-option value="0"> 全部 </a-select-option>
            <a-select-option value="1"> 未勘察 </a-select-option>
            <a-select-option value="2"> 已勘察未完工 </a-select-option>
            <a-select-option value="3"> 已完工 </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="楼盘(小区)名称">
          <a-input v-model="queryParam.ResidentialName" allowClear placeholder="楼盘(小区)名称" />
        </a-form-item>
      </a-col>
      <!-- <collapse-transition>
        <div v-show="!more">

        </div>
      </collapse-transition> -->
    </a-row>
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <span v-if="dataObj">{{ dataObj.title }} {{ dataObj.allPersonNum }} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
          <!-- <a @click="toggle">
            {{ more ? '展开' : '收起' }}
            <a-icon :type="more ? 'caret-down' : 'caret-up'" />
          </a> -->
          <a-button type="primary" style="margin-left: 14px;" @click="onSearch(queryParam)">查询</a-button>
          <!-- <a-button v-if="displayf != 'choose'" @click="add" style="margin-left: 14px;">添加</a-button> -->
          <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
          <a-button v-if="area == 'basic'" style="margin-left: 14px;" @click="exportExcel(queryParam)">导出工程清单</a-button>
          <a-popconfirm @confirm="deleted" placement="left" title="确定删除?" okText="确定" cancelText="取消">
            <a-button type="danger" style="margin-left: 14px;">删除</a-button>
          </a-popconfirm>
          <a-button v-if="displayf == 'choose'" style="margin-left: 14px;" @click="enSure()">确定</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { authDevice } from '@/utils/mixin'

import { GetAllChildDeptByParentID } from '@/api/project'
import { getDicList } from '@/api/dict'

const userInfo = Vue.ls.get(ACCESS_TOKEN)
export default {
  name: 'SearchFom',
  mixins: [authDevice],
  components: {},
  props: {
    area: {
      type: String,
      required: false
    },
    displayf: {
      type: String,
      required: false
    },
    dataObj: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      a: process.env.VUE_APP_API_BASE_URL + '/api/students/ImportExcel',
      normalizer(node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens
        }
      },
      fileList: [],
      userInfo,
      more: false,
      open: false,
      queryParam: {
        projectName: null,
        ProjectTypeID: null,
        departmentID: userInfo.DepartmentID,
        startDateStart: null,
        startDateEnd: null,
        endDateStart: null,
        endDateEnd: null,
        submitDateStart: null,
        submitDateEnd: null,
        ownerUnit: null,
        constructionUnit: null,
        supervisorUnit: null,
        IsNeedCheck: null,
        IsHasCheck: null,
        ResidentialName: null
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      departmentOptions: [], // 部门列表
      isDepartment: false, // 是否含有部门
      projectTypeOptions: []
    }
  },
  watch: {
    queryParam() {
      this.onSearch(this.queryParam)
    }
  },
  computed: {},
  created() {
    this.isDepartment = false
    this.getAllChildDeptByParentID(1, 1)
    getDicList({ categoryId: 2069 }).then(res => {
      this.projectTypeOptions = res
    })
  },
  mounted() { },
  methods: {
    toggle() {
      this.more = !this.more
    },
    startDateStartChange(dates, dateStrings) {
      this.queryParam.startDateStart = dateStrings;
    },
    startDateEndChange(dates, dateStrings) {
      this.queryParam.startDateEnd = dateStrings;
    },
    endDateStartChange(dates, dateStrings) {
      this.queryParam.endDateStart = dateStrings;
    },
    endDateEndChange(dates, dateStrings) {
      this.queryParam.endDateEnd = dateStrings;
    },
    addTimeStartChange(dates, dateStrings) {
      this.queryParam.submitDateStart = dateStrings;
    },
    addTimeEndChange(dates, dateStrings) {
      this.queryParam.submitDateEnd = dateStrings;
    },
    handleChange(val, option) {
      console.log(val)
      if (val.length > 1) {
        this.queryParam.departmentID = val[1]
      } else {
        this.queryParam.departmentID = val[0]
      }
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      targetOption.loading = true
      this.getAllChildDeptByParentID(targetOption.Id).then(res => {
        targetOption.loading = false
        targetOption.children = res
        this.departmentOptions = [...this.departmentOptions]
      })
    },
    handleTypeChange(val, option) {
      this.queryParam.ProjectTypeID = val
    },
    handleCheckChange(val, option, key) {
      switch (key) {
        case 'IsNeedCheck':
          this.queryParam.IsNeedCheck = val
          break;
        case 'IsNasCheck':
          this.queryParam.IsNasCheck = val
          break;
        case 'ProjectState':
          this.queryParam.ProjectState = val
          break;
        default:
          break;
      }
    },
    deleted() {
      this.$emit('handleDel')
    },
    enSure() {
      this.$emit('handleEnSure')
    },
    onSearch(data) {
      const objData = { ...data }
      this.$emit('search', objData)
    },
    exportExcel(data) {
      const objData = { ...data }
      this.$emit('exportXls', objData)
    },
    async getAllChildDeptByParentID(id, step) {
      if (step === 1) {
        await GetAllChildDeptByParentID(id).then(res => {
          res.forEach(r => {
            r.isLeaf = false
          })
          this.departmentOptions = res
          let flag = false
          flag = this.departmentOptions.some((opt) => {
            return opt.Id === userInfo.DepartmentID
          })
          if (!flag) {
            this.queryParam.departmentID = null
            this.onSearch(this.queryParam)
          } else {
            this.onSearch(this.queryParam)
          }
        })
      } else {
        return GetAllChildDeptByParentID(id)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
